<template>
  <RelationSection title="关联映射">
    <div>
      <a-button @click="clear" type="link">清空映射</a-button>
      <MappingRules/>
    </div>
    <AutoRelationMappingFieldBind
      style="padding-left: 15px" :relation="relation"
      :source-form-definition="formDefinition" :containsMainForm="true"
      :target-form-definition="relationTargetFormDefinition"
      :include-target-forms="relation.relationTargetInnerFormId"
      v-model="autoRelation.fieldBinds">
      <template slot="leftButton" slot-scope="{fieldContrast, index}">
        <a-icon
          type="exclamation" style="color: red"
          v-show="!hasConfigSelector() && isSelectorField(fieldContrast)"/>
        <a-button
          :class="['manual-relation-mapping-icon',{'manual-relation-mapping-selected-field': isSelectorField(fieldContrast)}]"
          @click="() => handleSelectorClick(isSelectorField(fieldContrast),  fieldContrast)"
          icon="file-search" size="small" type="link"/>
      </template>
    </AutoRelationMappingFieldBind>

    <RelationViewConfigModal
      title="穿透视图设置" @ok="handleOK"
      :viewConfigs="autoRelation.viewConfigs"
      :form-definition="relationTargetFormDefinition"
      ref="RelationViewConfigModal"/>
  </RelationSection>
</template>
<script>
import RelationSection from '@comp/hhd/design/relation/RelationSection/RelationSection.vue';
import MappingRules from '@comp/hhd/design/relation/MappingRules/MappingRules.vue';
import {createProps} from '@/utils';
import {createAuto, createRelation} from '@comp/hhd/design/relation/types';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import FieldContrastConfig from '@comp/hhd/design/relation/FieldContrastConfig/FieldContrastConfig.vue';
import AutoRelationMappingFieldBind
  from '@comp/hhd/design/relation/AutoRelationMapping/AutoRelationMappingFieldBind.vue';
import RelationViewConfigModal from '@comp/hhd/design/relation/RelationViewConfigModal/RelationViewConfigModal.vue';

export default {
  name: 'AutoRelationMapping',
  components: {RelationViewConfigModal, AutoRelationMappingFieldBind, FieldContrastConfig, MappingRules, RelationSection},
  props: {
    labelWidth: createProps(String),
    relation: createProps(Object, createRelation),
    formDefinition: createProps(Object, createFormDefinition),
    relationTargetFormDefinition: createProps(Object, createFormDefinition)
  },
  methods: {
    clear() {
      this.autoRelation.fieldBinds = []
    },
    hasConfigSelector() {
      if (!this.autoRelation.viewConfigs || !this.autoRelation.viewConfigs.length) return false;
      let previewFieldId = this.autoRelation.previewFieldId;
      let fieldBinds = this.autoRelation.fieldBinds;
      if (!previewFieldId) return false;
      if (fieldBinds.findIndex(f => f.sourceFieldId === previewFieldId) === -1)
        return false;
      return true;
    },
    handleSelectorClick(selected, fieldContrast) {
      if (!fieldContrast.sourceFieldId) return this.$message.warn('请先选择映射字段')
      if (selected) {
        this.openViewConfig();
      } else {
        this.autoRelation.previewFieldId = fieldContrast.sourceFieldId;
      }
    },
    openViewConfig() {
      this.$refs.RelationViewConfigModal.setData(this.autoRelation.viewConfigs);
    },
    isSelectorField(fieldContrast) {
      return (this.autoRelation.previewFieldId && fieldContrast.sourceFieldId)
        && (this.autoRelation.previewFieldId === fieldContrast.sourceFieldId);
    },
    handleOK(dataSource) {
      this.autoRelation.viewConfigs = dataSource
    },
  },
  computed: {
    autoRelation: {
      get() {
        return this.relation && this.relation.auto || createAuto();
      },
      set(v) {

      },
    }
  }
};
</script>